<!-- 继承页面模板 -->
{% extends 'layout/layui_base_page.html' %}

<!-- 加载静态文件 -->
{% load static %}

<!-- Title -->
{% block title %}
    培训信息
{% endblock %}

<!-- CSS --->
{% block css %}
{% endblock %}

<!-- Content -->
{% block content %}
    <!-- 01: 面包屑导航 -->
    <span class="layui-breadcrumb">
      <a href="javascript:;">首页</a>
      <a href="javascript:;">培训管理</a>
      <a><b>培训信息</b></a>
    </span>

    <!-- 02: 查询区域 --->
    <div id="queryArea" style="margin-top: 20px;">
        <form class="layui-form">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_str"><b>查询条件：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="q_str" id="q_str" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_department"><b>部门：</b></label>
                    <div class="layui-input-inline">
                        <div id="q_department" class="xm-select-demo"></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_status"><b>状态：</b></label>
                    <div class="layui-input-inline">
                        <div id="q_status" class="xm-select-demo"></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" id="btnQuery" class="layui-btn" style="width: 120px"><i
                            class="fa fa-search"></i>&nbsp;&nbsp;查询
                    </button>
                    <button type="button" id="btnAll" class="layui-btn" style="width: 120px"><i class="fa fa-list"></i>&nbsp;&nbsp;全部
                    </button>
                    <button type="button" id="btnAdd" class="layui-btn" style="width: 120px"><i class="fa fa-edit"></i>&nbsp;&nbsp;添加记录
                    </button>
                </div>
            </div>
        </form>

    </div>

    <!-- 03：表格区域 -->
    <table class="layui-hide" id="traineeInfoTable" lay-filter="traineeInfoTable"></table>

    <!-- 04: 表格中的按钮 -->
    <script type="text/html" id="tableButton">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
            <i class="fa fa-edit" aria-label="true"></i>&nbsp; 编辑
        </a>
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="cert">
            <i class="fa fa-certificate" aria-label="true"></i>&nbsp; 认证
        </a>
    </script>

    <!--05: 录入培训记录的弹出层 -->
    <div id="addRecordArea" style="display: none; padding: 40px 40px 0 40px;">
        <form class="layui-form" id="recordForm">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label"><b>员工信息：</b></label>
                    <div class="layui-input-inline">
                        <div id="eid" class="xm-select-demo"></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="line"><b>产线信息：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="line" name="line" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label"><b>部门：</b></label>
                    <div class="layui-input-inline">
                        <div id="department" class="xm-select-demo"></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="line"><b>职位：</b></label>
                    <div class="layui-input-inline">
                        <div id="position" class="xm-select-demo"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>阶段：</b></label>
                <div class="layui-input-inline">
                    <div id="phase" class="xm-select-demo"></div>
                </div>
            </div>
            <div class="layui-form-item" style="width: 624px">
                <label class="layui-form-label"><b>阶段内容：</b></label>
                <div class="layui-input-block">
                    <div id="phasecontent" class="xm-select-demo"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="training_time"><b>培训时长：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="training_time" name="training_time" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="line"><b>工时：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="working_time" name="working_time" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>状态：</b></label>
                <div class="layui-input-inline">
                    <div id="status" class="xm-select-demo"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="remark"><b>标注：</b></label>
                <div class="layui-input-block">
                    <textarea name="remark" id="remark" placeholder="请输入内容" class="layui-textarea"
                              style="width: 520px"></textarea>
                </div>
            </div>
        </form>
    </div>

    <!--06: 展示出响应阶段的Fail内容 -->
    <div id="phaseFailArea" style="display: none;padding: 30px">
        <ul id="phaseFialContent">

        </ul>
    </div>

    <!-- 07: 职位认证的弹出层 -->
    <div id="certContentArea" style="display: none; padding: 20px;">
        <form class="layui-form" id="certLayerForm">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 250px">
                    <label class="layui-form-label" for="certLine"><b>产线：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="certLine" name="certLine" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>
                <div class="layui-inline" style="width: 250px">
                    <label class="layui-form-label" for="certDepartment"><b>部门：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="certDepartment" name="certDepartment" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>
                <div class="layui-inline" style="width: 250px">
                    <label class="layui-form-label" for="certPosition"><b>职位：</b></label>
                    <div class="layui-input-block" style="display: none">
                        <input type="text" id="certPositionId" name="certPositionId" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                    <div class="layui-input-block">
                        <input type="text" id="certPosition" name="certPosition" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 250px">
                    <label class="layui-form-label" for="certEid"><b>工号：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="certEid" name="certEid" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>
                <div class="layui-inline" style="width: 250px">
                    <label class="layui-form-label" for="certName"><b>姓名：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="certName" name="certName" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label"><b>认证：</b></label>
                    <div class="layui-input-block">
                        <input type="radio" name="certResult" value="7" title="认证成功">
                        <input type="radio" name="certResult" value="8" title="认证失败">
                    </div>
                </div>
            </div>

        </form>
    </div>

{% endblock %}

<!-- JS -->
{% block js %}
    <script src="{% static 'js/xm-select.js' %}"></script>
    <script>
        // 定义变量Operation  1-->添加   2--> 编辑
        let Operation = 0;
        // 入口函数
        $(function () {
            // === 页面初始化 ===
            initPage();
            // === 表格初始化 ===
            initTable();
            // === 响应按钮的点击===
            buttonClick();
            // ==== 初始化选择培训的联级下拉框
            initXMSelect();
        });

        // ================ 页面初始化的实现 ==================
        function initPage() {
            layui.use(['element'], function () {
                let element = layui.element;
            });

            // 初始化查询的下拉框 【部门】
            let q_status_select = xmSelect.render({
                el: '#q_status'
                , name: 'q_status'
                , radio: true
                , clickClose: true
                , tips: "请选择状态"
                , filterable: true
                , height: '260px'
                , data: [
                    {'name': '未开始', 'value': 4},
                    {'name': '未完成', 'value': 5},
                    {'name': '待认证', 'value': 6},
                    {'name': '认证成功', 'value': 7},
                    {'name': '认证失败', 'value': 8},
                    {'name': '已离职', 'value': 0}
                ]


            });
            let q_department_select = xmSelect.render({
                el: '#q_department'
                , name: 'q_department'
                , radio: true
                , clickClose: true
                , tips: "请选择部门"
                , filterable: true
                , height: '200px'
                , data: []

            });
            // Ajax请求获取部门
            $.ajax({
                url: "{% url 'get_department_select' %}"
                , method: 'post'
                , data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                }
                , success: function (res) {
                    console.log("====", res);
                    q_department_select.update({data: res.data});
                }
            })


        }

        // ================ 初始化表格数据 ====================
        function initTable() {
            layui.use(['table', 'form', 'element'], function () {
                var table = layui.table;
                let form = layui.form;
                let element = layui.element;
                // ==== 渲染表格 =====
                table.render({
                    elem: $('#traineeInfoTable')
                    , url: "{% url 'list_trainee_info' %}"
                    , method: "post"
                    , where: {
                        q_str: $('#q_str').val(),
                        department_id: xmSelect.get('#q_department', true).getValue('valueStr'),
                        status_id: xmSelect.get('#q_status', true).getValue('valueStr'),
                        csrfmiddlewaretoken: "{{ csrf_token }}"
                    }
                    , even: true
                    , cols: [[
                        {type: 'numbers', width: 60, title: '序号', align: 'center', sort: true}
                        , {field: 'eid', width: 110, title: '工号', align: 'center'}
                        , {field: 'name', width: 100, title: '姓名', align: 'center', sort: true}
                        , {field: 'position__department__name', width: 80, title: '部门', align: 'center', sort: true}
                        , {field: 'position__name', width: 100, title: '职位', align: 'center', sort: true}
                        , {
                            field: 'phase_one', title: '阶段一', align: 'center', event: "phaseOne",
                            templet: function (res) {
                                // res--> 渲染当前行的数据，可以通过res.eid访问到学号，res.phase_one访问到阶段一完成的进度条
                                // 需求：完成 0-60 颜色一    60-90： 颜色2，   90-100： 颜色3， 100% 颜色4
                                // 返回前端html
                                return getPhasePercent(res.phase_one);
                            }
                        }
                        , {
                            field: '', width: 50, align: 'center', event: "viewStatusOne",
                            templet: function (res) {
                                return getPhseStatus(res.phase_one_status);
                            }
                        }
                        , {
                            field: '', title: '阶段二', align: 'center', event: "phaseTwo",
                            templet: function (res) {
                                return getPhasePercent(res.phase_two);
                            }
                        }
                        , {
                            field: '', width: 50, align: 'center', event: "viewStatusTwo",
                            templet: function (res) {
                                return getPhseStatus(res.phase_two_status);
                            }
                        }
                        , {
                            field: '', title: '阶段三', align: 'center', event: "phaseThree",
                            templet: function (res) {
                                return getPhasePercent(res.phase_three);
                            }

                        }
                        , {
                            field: '', width: 50, align: 'center', event: "viewStatusThree",
                            templet: function (res) {
                                return getPhseStatus(res.phase_three_status);
                            }
                        }

                        , {fixed: 'right', title: "操作", width: 200, align: 'center', toolbar: '#tableButton'}
                    ]]
                    , page: true
                    , limit: 15
                    , limits: [15, 20, 25, 30, 50, 100]
                    , done: function (res, curr, count) {
                        // 设置表头的样式
                        $('thead tr').css({'background-color': '#009688', 'color': 'white'});
                        // 重新渲染element
                        element.render();
                        // 设置表格背景色
                        for (var i = 0; i < res.data.length; i++) {
                            console.log(res.data[i]);
                            if (res.data[i].status_id == 7) {
                                $('.layui-table tbody tr').eq(i).css('background-color', '#DEFFAC');
                            } else if (res.data[i].status_id == 8) {
                                $('.layui-table tbody tr').eq(i).css('background-color', '#FEDCBD');
                            }
                        }
                    }
                });

                // ==== 响应表格中按钮的点击事件====
                table.on('tool(traineeInfoTable)', function (obj) {
                    // 获取点击行的数据
                    let oneLineData = obj.data;
                    // 判断点击的按钮
                    if (obj.event === 'assign') {
                        assignTrainLayer(oneLineData);
                    } else if (obj.event === 'phaseOne') {
                        // 跳出弹出层
                        loadPhaseDetailLayer('阶段一', oneLineData);
                    } else if (obj.event === 'phaseTwo') {
                        loadPhaseDetailLayer('阶段二', oneLineData);
                    } else if (obj.event === 'phaseThree') {
                        loadPhaseDetailLayer('阶段三', oneLineData);
                    } else if (obj.event === 'viewStatusOne') {
                        getFailContent(oneLineData, '阶段一')
                    } else if (obj.event === 'viewStatusTwo') {
                        getFailContent(oneLineData, '阶段二')
                    } else if (obj.event === 'viewStatusThree') {
                        getFailContent(oneLineData, '阶段三')
                    } else if (obj.event === 'edit') {
                        // 修改Operations值
                        Operation = 2;
                        // 获取当前职位Fail阶段
                        $.ajax({
                            url: "{% url 'get_position_fail_phase' %}"
                            , method: 'post'
                            , data: {
                                employee_id: oneLineData.eid,
                                position_id: oneLineData.position_id,
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            }
                            , success: function (res) {
                                if (res.status) {
                                    // 弹出层
                                    loadAddRecordLayer("编辑录入记录", oneLineData, res.data);
                                } else {
                                    layui.layer.msg(res.error);
                                }
                            }
                        });

                    } else if (obj.event === 'cert') {
                        loadCertLayer(oneLineData);
                    }

                })
            })
        }

        // ================ 渲染进度条，为表格中三个阶段服务 ============
        function getPhasePercent(number) {
            let color = "";
            // 判断
            if (number < 60) {
                color = "layui-bg-red";
            } else if (number >= 60 && number < 90) {
                color = "layui-bg-orange";
            } else if (number >= 90 && number < 100) {
                color = "layui-bg-cyan";
            } else if (number === 100) {
                color = "layui-bg-blue";
            }
            // 返回前端html
            return '<div class="layui-progress layui-progress-big" lay-showpercent="true">' +
                '<div class="layui-progress-bar ' + color + ' " lay-percent="' + number + '%"></div></div>'
        }

        // =============== 获取相应阶段状态的前端展示 ==========
        function getPhseStatus(number) {
            // 如果number = 0--- pass(green)  1--fail(red)  -1: 还是没开始 (grey)
            if (number === 0) {
                return '<a href="javascript:;" title="表示状态【目前完成内容都Pass】"><i class="fa fa-circle" aria-hidden="true" style="color:green"></i></a>';
            } else if (number === 1) {
                return '<a href="javascript:;" title="表示状态【目前完成内容存在Fail】"><i class="fa fa-circle" aria-hidden="true" style="color:red"></i></a>';
            } else if (number === -1) {
                return '<a href="javascript:;" title="表示状态【当前阶段尚未开始】"><i class="fa fa-circle" aria-hidden="true" style="color:grey"></i></a>';
            }

        }

        // ============== 获取相应阶段Fail内容 ===============
        function getFailContent(value, phaseName) {
            // 判断当前的阶段是否有fail内容
            if (phaseName === "阶段一") {
                if (value.phase_one_status === 0) {
                    layui.layer.msg("当前职位的" + phaseName + "的培训没有Fail内容");
                    return;
                } else if (value.phase_one_status === -1) {
                    layui.layer.msg("当前职位的" + phaseName + "的培训还没有开始");
                    return;
                }
            } else if (phaseName === "阶段二") {
                if (value.phase_two_status === 0) {
                    layui.layer.msg("当前职位的" + phaseName + "的培训没有Fail内容");
                    return;
                } else if (value.phase_two_status === -1) {
                    layui.layer.msg("当前职位的" + phaseName + "的培训还没有开始");
                    return;
                }
            } else if (phaseName === "阶段三") {
                if (value.phase_three_status === 0) {
                    layui.layer.msg("当前职位的" + phaseName + "的培训没有Fail内容");
                    return;
                } else if (value.phase_three_status === -1) {
                    layui.layer.msg("当前职位的" + phaseName + "的培训还没有开始");
                    return;
                }
            }
            console.log(value);

            layui.use(['layer'], function () {
                let layer = layui.layer;
                layer.open({
                    type: 1
                    , title: "<b style='color:navy'>【当前阶段Fail内容列表】</b>"
                    , btn: ['确定', '取消']
                    , area: ['600px', '400px']
                    , content: $('#phaseFailArea')

                    , success: function (index, layero) {
                        // 对于有Fail阶段，获取详情
                        $.ajax({
                            url: "{% url 'get_phase_fail_content' %}"
                            , method: 'post'
                            , data: {
                                employee_id: value.eid,
                                position_id: value.position_id,
                                phase_name: phaseName,
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            }
                            , success: function (res) {
                                // 获取内容id
                                let parentContainer = $('#phaseFialContent');
                                // 清空
                                parentContainer.empty();
                                // 遍历
                                $.each(res.data, (index, value) => {
                                    $('<li style="font-size: 18px; color:red;font-weight:bold;">').html('<i class="fa fa-circle" aria-hidden="true"></i> <span style="color:navy">编号:</span>' +
                                        value.phasecontent_id + "&nbsp&nbsp&nbsp&nbsp  <span style=\"color:navy\">名称：</span>" +
                                        value.phasecontent__name).appendTo(parentContainer);
                                })
                            }
                        })
                    }
                })
            });


        }

        // ================ 弹出阶段详情的弹出层 ================
        function loadPhaseDetailLayer(phaseName, value) {

            // 传递给子页面
            window.DATA = value;
            window.PHASE_NAME = phaseName;
            // 启用弹出层展示当前页面 【type:2】
            layui.use(['layer'], function () {
                let layer = layui.layer;
                layer.open({
                    type: 2 // 弹出的内容一个独立的页面
                    , title: "<b style='color:navy'>【阶段详情】</b>"
                    , area: ['100%', '100%']
                    , zindex: 10
                    , fixed: false
                    , maxmin: true
                    , content: "{% url 'trainee_phase_detail' %}"
                })
            })
        }

        // ================ 按钮点击的功能实现 =================
        function buttonClick() {
            // === 添加培训记录==
            $('#btnAdd').on('click', function () {
                // 修改Operation值
                Operation = 1;
                // 弹出
                loadAddRecordLayer("录入培训记录");
            });
            // === 点击查询按钮 ===
            $('#btnQuery').on('click', function () {
                // 重新请求数据
                initTable();
            });
            $('#btnAll').on('click', function () {
                location.reload();
            })
        }

        // ================ 展示录入记录的弹出层 ===============
        function loadAddRecordLayer(title, value = "", failPhase = "") {
            layui.use(['layer', 'form'], function () {
                let layer = layui.layer;
                let form = layui.form;

                // 渲染弹出层
                layer.open({
                    type: 1
                    , title: "<b style='color:navy'>【" + title + "】"
                    , area: ['800px', '700px']
                    , btn: ['确定', '取消']
                    , content: $('#addRecordArea')

                    // =============== 回调函数 ============
                    , success: function (index, layero) {
                        if (Operation === 2) {
                            initEditLayer(value, failPhase);
                        }

                    }
                    , yes: function (index, layero) {
                        // 1. 判断是否添加培训时长、工时、状态
                        if ($('#training_time').val().length === 0) {
                            layui.layer.msg("培训时长不能为空！");
                            return;
                        }
                        if ($('#working_time').val().length === 0) {
                            layui.layer.msg("工时不能为空！");
                            return;
                        }
                        // 状态
                        let status = xmSelect.get('#status', true).getValue('valueStr');
                        if (status.length === 0) {
                            layui.layer.msg("状态不能为空！");
                            return;
                        }

                        // ==== 开始提交  =====
                        //定义提交的url
                        let commitURL = "{% url 'info_add_commit' %}";
                        if (Operation === 2) {
                            commitURL = "{% url 'info_edit_commit' %}";
                        }
                        $.ajax({
                            url: commitURL
                            , method: 'post'
                            , data: $('#recordForm').serialize()
                            , dataType: 'json'
                            , success: function (res) {
                                if (res.status) {
                                    // 刷新表格
                                    location.reload();
                                } else {
                                    layui.layer.msg(res.error, {
                                        icon: 2, area: ['400px', '200px'], btn: ['关闭'], time: -1
                                    })
                                }
                            }
                        })


                    }
                    , end: function (index, layero) {
                        // 初始化所有的下拉库
                        initXMSelect();
                        // 清空文本框
                        $('#addRecordArea').find("input,textarea").val("");
                    }
                })
            })
        }

        // =============== 编辑Record初始化界面 ===============
        function initEditLayer(value, failPhase) {
            // 员工下拉
            let employee_select = xmSelect.render({
                el: '#eid'
                , name: 'eid'
                , theme: {
                    color: '#f37b1d',
                }
                , radio: true
                , clickClose: true
                , tips: "请选择员工"
                , filterable: true
                , height: '200px'
                , data: [{name: value.eid + "--" + value.name, value: value.eid}]
                , initValue: [value.eid]
            });
            // 部门下拉
            let department_select = xmSelect.render({
                el: '#department'
                , name: 'department'
                , theme: {
                    color: '#f37b1d',
                }
                , radio: true
                , clickClose: true
                , tips: "请选择部门"
                , filterable: true
                , height: '200px'
                , data: [{name: value.position__department__name, value: value.position__department_id}]
                , initValue: [value.position__department_id]

            });
            // 职位下拉
            let position_select = xmSelect.render({
                el: '#position'
                , name: 'position'
                , theme: {
                    color: '#f37b1d',
                }
                , radio: true
                , clickClose: true
                , tips: "请选择职位"
                , filterable: true
                , height: '200px'
                , data: [{name: value.position__name, value: value.position_id}]
                , initValue: [value.position_id]


            });
            // 阶段
            let phase_select = xmSelect.render({
                el: '#phase'
                , name: 'phase'
                , radio: true
                , clickClose: true
                , tips: "请选择阶段"
                , filterable: true
                , height: '200px'
                , data: failPhase
                , on: function (val) {
                    // 选择某一个用户后的事件
                    $.ajax({
                        'url': "{% url 'get_fail_content_by_phase' %}"
                        , method: 'post'
                        , data: {
                            phase_id: val.arr[0].value,
                            position_id: value.position_id,
                            employee_id: value.eid,
                            csrfmiddlewaretoken: "{{ csrf_token }}"
                        }
                        , success: function (res) {
                            phasecontent_select.update({data: res.data});
                        }
                    })
                }

            });
            // 阶段内容
            let phasecontent_select = xmSelect.render({
                el: '#phasecontent'
                , name: 'phasecontent'
                , radio: true
                , clickClose: true
                , tips: "请选择阶段内容"
                , filterable: true
                , height: '200px'
                , data: []

            });

            // === 6. 状态 =====
            let status_select = xmSelect.render({
                el: '#status'
                , name: 'status'
                , theme: {
                    color: '#f37b1d',
                }
                , radio: true
                , clickClose: true
                , tips: "请选择状态"
                , filterable: true
                , height: '200px'
                , data: [
                    {value: 1, name: 'InTraining'},
                    {value: 2, name: 'Pass'},
                    {value: 3, name: 'Fail'},
                ]
                , initValue: [2]
            });
        }

        // =============== 用户认证的弹出层 ===================
        function loadCertLayer(value) {
            layui.use(['layer', 'form'], function () {
                let layer = layui.layer;
                let form = layui.form;

                layer.open({
                    type: 1
                    , title: '<b style="color:navy">【职位认证】</b>'
                    , area: ['900px', '400px']
                    , btn: ['确认', '取消']
                    , content: $('#certContentArea')

                    // ======== 回调函数===================
                    , success: function (index, layero) {
                        // 填充产线、部门和职位
                        console.log("====", value);
                        $('#certLine').val(value.position__department__line__name);
                        $('#certDepartment').val(value.position__department__name);
                        $('#certPositionId').val(value.position_id);
                        $('#certPosition').val(value.position__name);
                        $('#certEid').val(value.eid);
                        $('#certName').val(value.name);


                        // 赋值 --- 认证成功、失败
                        if (value.status_id === 7 || value.status_id === 8){
                            $("input[name='certResult'][value="+ value.status_id + "]").prop('checked', 'checked');
                            $("input[name='certResult']").prop('disabled', true);
                            form.render();
                        }
                    }
                    , yes: function (index, layero) {

                        // 判断是否选中单选框
                        let selectValue = $('input[name="certResult"]:checked').val();
                        if (typeof (selectValue) == "undefined") {
                            layui.layer.msg("没有选中 \'认证成功\' 或者 \'认证失败\' 无法提交！");
                            return;
                        }

                        // 提交
                        $.ajax({
                            url: "{% url 'trainee_position_cert' %}"
                            , method: 'post'
                            , data: $('#certLayerForm').serialize()
                            , success: function (res) {
                                if (res.status) {
                                    location.reload();
                                } else {
                                    layui.layer.msg(res.error, {
                                        icon: 2, area: ['400px', '200px'], time: -1, btn: ['关闭']
                                    })
                                }
                            }
                        })


                    }
                    , end: function (index, layero) {
                        $("input[name='certResult'][value="+ value.status_id + "]").prop('checked', false);
                        $("input[name='certResult']").prop('disabled', false);
                        form.render();
                    }

                })
            })
        }

        // ===============  xm-select下拉框初始花 =============
        function initXMSelect() {
            // === 1. 用户 =====
            let employee_select = xmSelect.render({
                el: '#eid'
                , name: 'eid'
                , radio: true
                , clickClose: true
                , tips: "请选择员工"
                , filterable: true
                , height: '200px'
                , data: []
                , on: function (value) {
                    // 选择某一个用户后的事件
                    $.ajax({
                        'url': "{% url 'get_department_by_employee' %}"
                        , method: 'post'
                        , data: {
                            employee_id: value.arr[0].value,
                            csrfmiddlewaretoken: "{{ csrf_token }}"
                        }
                        , success: function (res) {
                            department_select.update({data: res.data});
                        }
                    })
                }

            });
            // 自动请求当前产线的数据
            $.ajax({
                url: "{% url 'get_empolyee_by_line' %}"
                , method: 'get'
                , success: function (res) {
                    // 赋值下拉框
                    employee_select.update({data: res.data});
                    // 赋值产线
                    $('#line').val(res.line_name);
                }
            });
            // === 2. 部门 =====
            let department_select = xmSelect.render({
                el: '#department'
                , name: 'department'
                , radio: true
                , clickClose: true
                , tips: "请选择部门"
                , filterable: true
                , height: '200px'
                , data: []
                , on: function (value) {
                    // 选择某一个用户后的事件
                    $.ajax({
                        'url': "{% url 'get_position_by_department' %}"
                        , method: 'post'
                        , data: {
                            department_id: value.arr[0].value,
                            csrfmiddlewaretoken: "{{ csrf_token }}"
                        }
                        , success: function (res) {
                            position_select.update({data: res.data});
                        }
                    })
                }

            });
            // === 3. 职位 =====
            let position_select = xmSelect.render({
                el: '#position'
                , name: 'position'
                , radio: true
                , clickClose: true
                , tips: "请选择职位"
                , filterable: true
                , height: '200px'
                , data: []
                , on: function (value) {
                    // 获取当前员工的信息
                    var employee_id = xmSelect.get('#eid', true).getValue('valueStr');
                    // 选择某一个职位后的事件
                    $.ajax({
                        'url': "{% url 'get_current_phase_phasecontent' %}"
                        , method: 'post'
                        , data: {
                            position_id: value.arr[0].value,
                            employee_id: employee_id,
                            csrfmiddlewaretoken: "{{ csrf_token }}"
                        }
                        , success: function (res) {
                            if (res.status) {
                                // 给下拉框提供数据源
                                phase_select.update({data: res.phase});
                                phasecontent_select.update({data: res.phasecontent});
                                // 选择下拉库的数据
                                phase_select.setValue(res.phase);
                                phasecontent_select.setValue(res.phasecontent);
                            } else {
                                layui.layer.msg(res.error);
                            }

                        }
                    })
                }

            });
            // === 4. 阶段 =====
            let phase_select = xmSelect.render({
                el: '#phase'
                , name: 'phase'
                , theme: {
                    color: '#f37b1d',
                }
                , radio: true
                , clickClose: true
                , tips: "请选择阶段"
                , filterable: true
                , height: '200px'
                , data: []

            });
            // === 5. 阶段内容 =====
            let phasecontent_select = xmSelect.render({
                el: '#phasecontent'
                , name: 'phasecontent'
                , theme: {
                    color: '#f37b1d',
                }
                , radio: true
                , clickClose: true
                , tips: "请选择阶段内容"
                , filterable: true
                , height: '200px'
                , data: []

            });
            // === 6. 状态 =====
            let status_select = xmSelect.render({
                el: '#status'
                , name: 'status'
                , radio: true
                , clickClose: true
                , tips: "请选择状态"
                , filterable: true
                , height: '200px'
                , data: [
                    {value: 1, name: 'InTraining'},
                    {value: 2, name: 'Pass'},
                    {value: 3, name: 'Fail'},
                ]
            });
        }


    </script>

{% endblock %}